<template>
  <div
    v-loading="loading"
    element-loading-text="验证中"
    element-loading-spinner="el-icon-loading"
    style="text-align: center; width: 60%"
  >
    <el-alert
      type="success"
      :closable="true"
      v-if="showMsg && validated && !loading"
      >验证成功，10秒后自动跳转到账号安全页面</el-alert
    >
    <el-alert
      type="error"
      :closable="true"
      v-if="showMsg && !validated && !loading"
      >验证失败， 请过一段时间重新验证，10秒后自动跳转到账号安全页面</el-alert
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      validated: false,
      showMsg: false,
    };
  },
  mounted() {
    this.validate();
  },
  methods: {
    validate() {
      let token = this.$route.fullPath.split("/")[2];
      let url = "users/" + localStorage.id + "/validate_email_confirm/" + token;
      this.$http
        .get(url)
        .then(() => {
          this.validated = true;
          this.loading = false;
          this.showMsg = true;
          localStorage.setItem('emailValidated', true)
          setTimeout(() => {
            this.$router.push({
              name: "Security",
            });
          }, 1000 * 10);
        })
        .catch(() => {
          this.loading = false;
          this.showMsg = true;
          setTimeout(() => {
            this.$router.push({
              name: "Security",
            });
          }, 1000 * 10);
        });
    },
  },
};
</script>

<style>
</style>